<template>
  <div>
    <!-- 列表展示 -->
  <el-table style="width: 100%" :data="menus" v-loading="loading"  
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading">
    <el-table-column label="图片" prop="coverpic">
      <template v-slot="props">
        <img :src="props.row.coverpic" width="40"/>
      </template>
    </el-table-column>
    <el-table-column label="菜名" prop="name"></el-table-column>
    <el-table-column label="收藏次数" prop="collections"></el-table-column>
    <el-table-column label="是否免费" prop="isFree">
      <template v-slot="props">
        {{props.row.isFree=='N'?'否':'是'}}
      </template>
    </el-table-column>
    <el-table-column label="是否热门" prop="isHot">
      <template v-slot="props">
        {{props.row.isHot=='N'?'否':'是'}}
      </template>
    </el-table-column>
    <el-table-column label="是否推荐" prop="isRecommend">
      <template v-slot="props">
        {{props.row.isRecommend=='N'?'否':'是'}}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="">
        <el-button type="warning">修改</el-button>
        <el-button type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      background
      layout="prev, pager, next"
      @current-change="changePage"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {findAllMenu} from 'api/menu.js'
import to from 'await-to-js'
export default {
  data(){
    return {
      loading:true,
      menus:[],
      total:0,
      pageSize:5,
      currentPage:1
    }
  },
  mounted(){
    this.list();
  },
  methods:{
    changePage(num){
      console.log(num);//页码
      this.currentPage=num;
      this.list();
    },
    async list(){
      let [error,res] = await to(findAllMenu(this.pageSize,this.currentPage))
      if(res){
        // console.log(res);
        this.menus = res.menus;//列表(当前这一页)
        this.total = res.total;//总条数(所有数据)
      }else{
        this.$message.error(error);
      }
      this.loading=false;
    }
  }
}
</script>

<style>

</style>